<template>
  <div class="app">
    <el-row>
      <el-col class="t-r">
        <el-button @click="goBack">返回</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <table class="el-table el-table--striped el-table--border">
          <tbody>
            <tr>
              <td>订单 ID</td>
              <td>{{ order.order_id }}</td>
            </tr>
            <tr>
              <td>用户 ID</td>
              <td>{{ order.user_id }}</td>
            </tr>
            <tr>
              <td>订单号</td>
              <td>{{ order.order_number | orderNumber }}</td>
            </tr>
            <tr>
              <td>订单金额</td>
              <td v-if="order_price">{{ order.order_price }}  <i v-if="type === 'edit'" class="el-icon-edit" @click="editField('order_price')" /></td>
              <td v-else>

                <el-input-number v-model="order.order_price" size="mini" :precision="0" :step="0.1" :min="0" :controls="false" />
                <span v-if="type === 'edit'">
                  <i class="el-icon-circle-check" @click="submitField('order_price')" />
                  <i class="el-icon-circle-close" @click="cancelField('order_price')" />
                </span>
              </td>
            </tr>
            <tr>
              <td>支付状态</td>
              <td v-if="pay_status">{{ order.pay_status == 1 ? '已付款': '未付款' }}  <i v-if="type === 'edit'" class="el-icon-edit" @click="editField('pay_status')" /></td>
              <td v-else>
                <el-select v-model="order.pay_status">
                  <el-option label="未付款" value="0" />
                  <el-option label="已付款" value="1" />
                </el-select>
                <span v-if="type === 'edit'">
                  <i class="el-icon-circle-check" @click="submitField('pay_status')" />
                  <i class="el-icon-circle-close" @click="cancelField('pay_status')" />
                </span>
              </td>
            </tr>
            <tr>
              <td>支付方式</td>
              <td v-if="order_pay">{{ payWays[order.order_pay] }}  <i v-if="type === 'edit'" class="el-icon-edit" @click="editField('order_pay')" /></td>
              <td v-else>
                <el-select v-model="order.order_pay">
                  <el-option v-for="(v,k) in payWays" :key="k" :label="v" :value="k" />
                </el-select>
                <span v-if="type === 'edit'">
                  <i class="el-icon-circle-check" @click="submitField('order_pay')" />
                  <i class="el-icon-circle-close" @click="cancelField('order_pay')" />
                </span>
              </td>
            </tr>
            <tr>
              <td>发货状态</td>
              <td v-if="is_send">{{ order.is_send == 1 ? '已经发货': '未发货' }}  <i v-if="type === 'edit'" class="el-icon-edit" @click="editField('is_send')" /></td>
              <td v-else>
                <el-select v-model="order.is_send">
                  <el-option label="未发货" value="0" />
                  <el-option label="已经发货" value="1" />
                </el-select>
                <span v-if="type === 'edit'">
                  <i class="el-icon-circle-check" @click="submitField('is_send')" />
                  <i class="el-icon-circle-close" @click="cancelField('is_send')" />
                </span>
              </td>
            </tr>
            <tr>
              <td>商品详情</td>
              <td class="inner-table">
                <el-table
                  :data="order.goods"
                  size="mini"
                  border
                  :header-cell-style="headerStyle"
                  style="width: 100%"
                >
                  <el-table-column
                    prop="goods_id"
                    label="商品 ID"
                  />
                  <el-table-column
                    prop="goods_number"
                    label="商品数量"
                  />
                  <el-table-column
                    prop="goods_price"
                    label="商品单价"
                  />
                  <el-table-column
                    prop="goods_total_price"
                    label="商品金额"
                  />
                </el-table>
              </td>
            </tr>
            <tr>
              <td>下单时间</td>
              <td>{{ order.create_time | parseTime }}</td>
            </tr>
            <tr>
              <td>更新时间</td>
              <td>{{ order.update_time | parseTime }}</td>
            </tr>
          </tbody>
        </table>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getOrderDetail, putOrder } from '@/api/orders'
import { payWays } from '@/utils/default'

export default {
  name: 'ORDERFORM',
  filters: {
    orderNumber(value) {
      if (value) {
        value = value.replace('itcast-', 'cc3688-')
      }
      return value
    }
  },
  data() {
    return {
      type: '',
      orderId: '',
      order: {},
      payWays,
      headerStyle: {
        backgroundColor: '#ffffff'
      },
      order_price: true,
      pay_status: true,
      order_pay: true,
      is_send: true
    }
  },
  created() {
    this.type = this.$route.meta.type
    this.orderId = this.$route.params.id
    this.getOrderDetail(this.orderId)
  },
  methods: {
    goBack() {
      this.$router.go(-1)
    },
    async getOrderDetail(id) {
      this.order = await getOrderDetail(id)
      if (this.order.is_send != 0 || this.order.is_send != 1) {
        this.order.is_send = this.order.is_send === '否' ? '0' : '1'
      }
    },
    editField(filed) {
      this[filed] = false
    },
    cancelField(filed) {
      this[filed] = true
    },
    async submitField(filed) {
      const data = {
        id: this.orderId,
        order_price: this.order.order_price,
        [filed]: this.order[filed]
      }
      this.order = await putOrder(data)
      if (this.order.is_send != 0 || this.order.is_send != 1) {
        this.order.is_send = this.order.is_send === '否' ? '0' : '1'
      }
      this[filed] = true
      this.$message({
        type: 'success',
        message: '更新成功'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.app {
  .el-table {
    margin-top: 1em;
    width: 65%;
    &::before {
      background-color: #ffffff;
    }
    &::after {
      background-color: #ffffff;
    }
    tbody tr td:nth-child(1) {
      width: 20%;
      min-width: 100px;
      padding-left: 0.5em;
      padding-right: 0.5em;
      background-color: #fbfbfb;
    }
    tbody tr td:nth-child(2) {
      width: 80%;
      padding-left: 0.5em;
      padding-right: 0.5em;
      display: flex;
      justify-content: space-between;
      justify-items: center;
      .el-input {
        width: 50%;
      }
      i {
        font-size: 16px;
        cursor: pointer;
      }
      span {
        i {
          line-height: 30px;
          font-size: 20px;
          padding-left: 10px;
        }
      }
    }
    .inner-table .el-table {
      &::before {
      background-color: #EBEEF5;
      }
      &::after {
        background-color: #EBEEF5;
      }
      th.is-leaf {
        background-color: #ffffff!important;
      }
    }
  }
}

</style>
